<template>
  <div class="met-shownews" :style="{backgroundColor:app_tabBar.config.bodybgcolor}">
    <div class="head">
      <h1 :style="{color:app_tabBar.config.firstcolor}">{{news_view.title}}</h1>
      <div class="info">
        <span :style="{color:app_tabBar.config.secondcolor}">{{news_view.addtime}}</span>
        <span :style="{color:app_tabBar.config.secondcolor}">
          <i-icon type="group_fill" size="18" />&nbsp;{{news_view.issue}}</span>
        <span :style="{color:app_tabBar.config.secondcolor}">
          <i-icon type="browse_fill" size="18" />&nbsp;{{news_view.hits}}</span>
      </div>
    </div>
    <div class="body">
      <wxParse :content="news_view.content" />
    </div>
    <div class="page">
      <div class="prev-page" :style="{color:app_tabBar.config.firstcolor,borderColor:app_tabBar.config.firstcolor}" @click="changPage(news_view.last_page.id)">{{news_view.last_page.name}} : {{news_view.last_page.title}}</div>
      <div class="next-page" :style="{color:app_tabBar.config.firstcolor,borderColor:app_tabBar.config.firstcolor}" @click="changPage(news_view.next_page.id)">{{news_view.next_page.name}} : {{news_view.next_page.title}}</div>
    </div>
    <sidebar></sidebar>
  </div>
</template>
<script>
import wxParse from 'mpvue-wxparse'
import Sidebar from '@/components/common/Sidebar'
import { mapGetters } from 'vuex'
export default {
  components: {
    wxParse,
    Sidebar
  },
  computed: {
    ...mapGetters(['news_view', 'app_tabBar'])
  },
  data() {
    return {}
  },
  methods: {
    changPage(id) {
      if (id) {
        wx.showLoading({
          title: '加载中'
        })
        const param = {
          id: id,
          module: '2'
        }

        this.$store.dispatch('GetNewsView', param).then(response => {
          wx.hideLoading()
          wx.pageScrollTo({
            scrollTop: 0,
            duration: 300
          })
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('~mpvue-wxparse/src/wxParse.css');
.met-shownews {
  padding: 15px 0;
  .head {
    padding: 15px;
    border-bottom: 1px solid #dcdcdc;
    h1 {
      font-size: 24px;
      line-height: 1.5;
      color: #000000;
      margin: 5px 0;
    }
    .info {
      color: #a3afb7;
      font-size: 14px;
      font-weight: 300;
      .fa {
        margin-right: 8px;
      }
      span {
        margin-right: 10px;
      }
    }
  }
  .body {
    padding: 0 15px 15px 15px;
    border-bottom: 1px solid #dcdcdc;
  }
  .page {
    display: flex;
    justify-content: space-between;
    padding: 30px 15px 0px 15px;
    div {
      border: 1px solid #999;
      color: #999;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 120px;
      padding: 4px 6px;
      font-size: 13px;
    }
  }
}
</style>

